<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>结算页面</title>

    <link href="AmazeUI-2.4.2/assets/css/amazeui.css" rel="stylesheet" type="text/css"/>

    <link href="css/demo.css" rel="stylesheet" type="text/css"/>
    <link href="css/cartstyle.css" rel="stylesheet" type="text/css"/>

    <link href="css/jsstyle.css" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="../view-api/js/jquery.js"></script>
    <script type="text/javascript" src="js/address.js"></script>

    <script src="../view-api/js/vue.js"></script>

    <!--自定义工具-->
    <script src="../view-api/js/HttpUtil.js"></script>
    <script src="js/Data.js"></script>

</head>

<body>

<!--顶部导航条 -->
<div class="am-container header">
    <ul class="message-l">
        <div class="topMessage">
            <div class="menu-hd" id="AA">
                <a href="login.html" target="_top" class="h" id="a1">亲，请登录</a>
                <a href="register.html" target="_top" id="a2">免费注册</a>
            </div>
        </div>
    </ul>
    <ul class="message-r">
        <div class="topMessage home">
            <div class="menu-hd"><a href="home2.html" target="_top" class="h">商城首页</a></div>
        </div>
        <div class="topMessage my-shangcheng">
            <div class="menu-hd MyShangcheng"><a href="information.html" target="_top"><i
                    class="am-icon-user am-icon-fw"></i>个人中心</a></div>
        </div>
        <div class="topMessage mini-cart">
            <div class="menu-hd"><a id="mc-menu-hd" href="myShopCart.html" target="_top"><i
                    class="am-icon-shopping-cart  am-icon-fw"></i><span>购物车</span><strong id="J_MiniCartNum"
                                                                                          class="h">0</strong></a>
            </div>
        </div>
        <div class="topMessage favorite">
            <div class="menu-hd"><a href="#" target="_top"><i
                    class="am-icon-heart am-icon-fw"></i><span>收藏夹</span></a></div>
        </div>
        <div class="topMessage favorite">
            <div class="menu-hd"><a href="order.html" target="_top"><i
                    class="am-icon-star am-icon-fw"></i><span>个人订单</span></a></div>
        </div>
    </ul>
</div>

<!--悬浮搜索框-->

<div class="nav white">
    <div class="logo"><img src="images/logo.png"/></div>
    <div class="logoBig">
        <li><img src="images/logobig.png"/></li>
    </div>

    <div class="search-bar pr">
        <a name="index_none_header_sysc" href="#"></a>
        <form>
            <input id="searchInput" name="index_none_header_sysc" type="text" placeholder="搜索" autocomplete="off">
            <input id="ai-topsearch" class="submit am-btn" value="搜索" index="1" type="button">
        </form>
    </div>
</div>

<div class="clear"></div>

<div>
    <div class="concent">
        <!--地址 -->
        <div class="paycont">
            <div class="address">
                <h3>确认收货地址 </h3>

                <div class="clear"></div>
                <ul id="showAdd">
                    <div class="per-border"></div>
                    <div class="per-border"></div>







                </ul>

                <div class="clear"></div>
            </div>


            <!--订单 -->
            <div class="concent" id="vue_pay">
                <div id="payTable">
                    <h3>确认订单信息</h3>
                    <div class="cart-table-th">
                        <div class="wp">

                            <div class="th th-item">
                                <div class="td-inner">商品信息</div>
                            </div>
                            <div class="th th-price">
                                <div class="td-inner">单价</div>
                            </div>
                            <div class="th th-amount">
                                <div class="td-inner">数量</div>
                            </div>
                            <div class="th th-sum">
                                <div class="td-inner">金额</div>
                            </div>
                            <div class="th th-oplist">
                                <div class="td-inner">配送方式</div>
                            </div>

                        </div>
                    </div>


<div v-for="goods in goodsList">
                        <tr id="J_BundleList_s_1911116345_1" class="item-list"  >
                            <div id="J_Bundle_s_1911116345_1_0" class="bundle  bundle-last">
                                <div class="bundle-main">
                                    <ul class="item-content clearfix">
                                        <div class="pay-phone">
                                            <li class="td td-item">
                                                <div class="item-pic">
                                                    <a href="#" class="J_MakePoint">
                                                        <img :src="goods.imgUrl" style="height: 80px;" class="itempic J_ItemImg"></a>
                                                </div>
                                                <div class="item-info">
                                                    <div class="item-basic-info">
                                                        <a href="#" target="_blank" title="美康粉黛醉美唇膏 持久保湿滋润防水不掉色"
                                                           class="item-title J_MakePoint" data-point="tbcart.8.11">
                                                            {{goods.goodsName}}</a>
                                                    </div>
                                                </div>
                                            </li>

                                            <li class="td td-price">
                                                <div class="item-price price-promo-promo">
                                                    <div class="price-content">
                                                        <em class="J_Price price-now">{{goods.price|showPrice }}</em>
                                                    </div>
                                                </div>
                                            </li>
                                        </div>

                                        <li class="td td-amount">
                                            <div class="amount-wrapper ">
                                                <div class="item-amount ">
                                                    <span class="phone-title">{{Number}}</span>
                                                    <div class="sl">

                                                        <p class="text_box" style="width:30px;padding-left:80px">
                                                            {{goods.goodsNumber}}</p>

                                                    </div>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="td td-sum">
                                            <div class="td-inner">
                                                <em tabindex="0" class="J_ItemSum number">{{goods.goodsNumber*goods.price|showPrice}}</em>
                                            </div>
                                        </li>
                                        <li class="td td-oplist">
                                            <div class="td-inner">
                                                <span class="phone-title">配送方式</span>
                                                <div class="pay-logis">
                                                    包邮
                                                </div>
                                            </div>
                                        </li>

                                    </ul>
                                    <div class="clear"></div>

                                </div>
                            </div>
                        </tr>

</div>
                        <div class="clear"></div>
                        <div class="pay-total">


                        </div>
                        <!--含运费小计 -->
                        <div class="buy-point-discharge ">
                            <p class="price g_price ">
                                合计（含运费） <span></span><em class="pay-sum">{{orderPrice|showPrice}}</em>
                            </p>
                        </div>


                </div>

                <!--信息 -->
                <div class="order-go clearfix">
                    <div class="pay-confirm clearfix">
                        <div class="box">
                            <div tabindex="0" id="holyshit267" class="realPay"><em class="t">实付款：</em>
                                <span class="price g_price ">
                                    <span></span> <em class="style-large-bold-red " id="J_ActualFee">{{orderPrice|showPrice}}</em>
											</span>
                            </div>

                            <div id="holyshit268" class="pay-address">

                                <p class="buy-footer-address">
                                    <span class="buy-line-title buy-line-title-type">寄送至：</span>
                                    <span class="buy--address-detail">
								   <span class="province" id="pp"></span>省
												<span class="city" id="cc"></span>市
												<span class="dist" id="dd"></span>区
												<span class="street" id="ss"></span>
												</span>
                                    </span>
                                </p>
                                <p class="buy-footer-address">
                                    <span class="buy-line-title">收货人：</span>
                                    <span class="buy-address-detail">
                                         <span class="buy-user" id="nn"> </span>
												<span class="buy-phone" id="ppp"></span>
												</span>
                                </p>
                            </div>
                        </div>

                        <div id="holyshit269" class="submitOrder">
                            <div class="go-btn-wrap">
                                <a id="J_Go" @click="alipayTradePagePay" class="btn-go" tabindex="0" title="点击此按钮，提交订单">提交订单</a>
                            </div>
                        </div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>

            <div class="clear"></div>
        </div>

    </div>

    <div class="footer">
        <div class="footer-hd">
            <p>
                <b>|</b>
                <a href="http://localhost:8080/views/view-api/home2.html ">商城首页</a>
                <b>|</b>
                <a href="# ">支付宝</a>
                <b>|</b>
                <a href="# ">物流</a>
            </p>
        </div>
        <div class="footer-bd ">
            <p>
                <a href="# ">合作伙伴</a>
                <a href="# ">联系我们</a>
                <a href="# ">网站地图</a>
            </p>
        </div>
    </div>
</div>
<div class="theme-popover-mask"></div>
<div class="theme-popover">


    <div class="clear"></div>
</div>
</body>


</html>

<script>



    const vue = new Vue({
        el: "#vue_pay",
        data: {
            goodsList:"",
            orderPrice:"",
            goods:""
        },

        filters: {
            showPrice(price) {
                return '￥' + price.toFixed(2)
            }
        },
        //初始化购物车
        methods: {

            //支付
            alipayTradePagePay: function (){
                //根据地址栏 获取订单id，
                let WIDout_trade_no = window.location.search.substring(4)
                var WIDtotal_amount = this.orderPrice;

                let url = "http://localhost:8080/shop-api/alipayTradePagePay";
                let overview = "购买商品";
                let widDody = "";
                let params = {WIDout_trade_no: WIDout_trade_no, WIDtotal_amount: WIDtotal_amount, WIDsubject: overview, WIDbody: widDody};
                $.ajax({
                    type: "post",
                    url: url,
                    data: params,
                    success: function (resp) {
                        window["data"] = resp;
                        window.open("http://localhost:8080/view-api/alipay.html");
                    }
                });


            },

            initPay: function () {
                let url = "myCart/initPay"
                let thisObj = this;
                // 根据session获取用户id
                let userId = sessionStorage.id;
                //根据地址栏 获取商品id，
                let orderId = window.location.search.substring(4)
                let params = {orderId: orderId}
                postWithParams(url, params, function (data) {
                    //
                    thisObj.goodsList = data;
                    console.log(thisObj.goodsList);
                    console.log("执行成功");
                    thisObj.orderPrice= data[0].orderPrice
                })
            }
        },

        mounted: function () {
            //页面加载完成，并且vue对象加载完成之后调用
            this.initPay();
        },

    })

    //为页面搜索功能实现功能
    //获取搜索按钮
    let topsearch = document.getElementById("ai-topsearch");
    //搜索按钮绑定点击事件
    topsearch.onclick = function () {
        let searchInput = document.getElementById("searchInput");
        let value = searchInput.value;
        //跳转到详情页,把id带过去
        let openUrl = "http://localhost:8080/views/view-api/search.html";
        window.open(openUrl + "?" + value)

    }

    $(function () {
        showAddress();
        OnDisplay();
        showAddressInit();
    });

    function showAddress() {
        $.ajax({
            url: "http://localhost:8080/shop-api/showAddress",
            type: "Get",
            data: {"userId": sessionStorage.id},
            success: function (data) {
                let Obj = JSON.parse(data);
                let code = Obj.code;
                let List = Obj.data;
                let msg = Obj.msg;

                if (code === 100) {
                    for (let i = 0; i < List.length; i++) {
                        let listElement = List[i];
                        let stringify = JSON.stringify(listElement);
                        /*console.log("111");
                        console.log(stringify);*/
                        $("#showAdd").append("<li class=\"user-addresslist\">\n" +
                            "                            <div class=\"address-left\">\n" +
                            "                                <div class=\"user DefaultAddr\">\n" +
                            "                                            <span class=\"buy-address-detail\">\n" +
                            "                       <span class=\"buy-user\">" + List[i].name + " </span>\n" +
                            "                                            <span class=\"buy-phone\">" + List[i].phone + "</span>\n" +
                            "                                            </span>\n" +
                            "                                </div>\n" +
                            "                                <div class=\"default-address DefaultAddr\">\n" +
                            "                                    <span class=\"buy-line-title buy-line-title-type\">收货地址：</span>\n" +
                            "                                    <span class=\"buy--address-detail\">\n" +
                            "                                       <span class=\"province\">" + List[i].province + "\n" +
                            "                                            <span class=\"city\">" + List[i].city + "\n" +
                            "                                            <span class=\"dist\">" + List[i].dist + "\n" +
                            "                                            <span class=\"street\">" + List[i].address + "</span>\n" +
                            "                                            </span>\n" +
                            "    \n" +
                            "                                    </span>\n" +
                            "                                </div>\n" +
                            "                                <ins class=\"deftip hidden\">默认地址</ins>\n" +
                            "                            </div>\n" +
                            "                            <div class=\"address-right\">\n" +
                            "                                <span class=\"am-icon-angle-right am-icon-lg\"></span>\n" +
                            "                            </div>\n" +
                            "                            <div class=\"clear\"></div>\n" +
                            "    \n" +
                            "                            <div class=\"new-addr-btn\">\n" +
                            "                                <a href=\"#\" onclick=\"addressBuy(" + List[i].id + ");\")>选中地址</a>" +
                            "                                <span class=\"new-addr-bar\"></span>\n" +
                            "                                <span class=\"new-addr-bar\">|</span>\n" +
                            "                                <a href=\"javascript:void(0);\" onclick=\"delClick(" + List[i].id + ");\">删除</a>\n" +
                            "                            </div>\n" +
                            "    \n" +
                            "                        </li>")
                    }
                }
            }
        })
    }

    function delClick(id) {
        console.log(id);
        $.ajax({
            url: "http://localhost:8080/shop-api/delAddress",
            type: "Post",
            data: {"userId": sessionStorage.id, "id": id},
            success: function (data) {
                let Obj = JSON.parse(data);
                let Rcode = Obj.code;
                let Rmsg = Obj.msg;
                let Rdata = Obj.data;
                if (Rcode === 101) {
                    alert(Rmsg);
                    return;
                }
                alert("删除成功！");
                location.reload()
            }
        })
    }

    function showAddressInit() {
        $.ajax({
            url: "http://localhost:8080/shop-api/showAddress",
            type: "Get",
            data: {"userId": sessionStorage.id},
            success: function (data) {
                let Obj = JSON.parse(data);
                let code = Obj.code;
                let List = Obj.data;
                let msg = Obj.msg;
                var listElement = List[0];
                $("#pp").html(listElement.province)
                $("#cc").html(listElement.city)
                $("#dd").html(listElement.dist)
                $("#nn").html(listElement.name)
                $("#ppp").html(listElement.phone)
                $("#aa").html(listElement.address)
            }}
            )}





    function addressBuy(id) {
        $.ajax({
            url: "http://localhost:8080/shop-api/selectAddressById",
            type: "Get",
            data: {"id": id},
            success: function (data) {
                let Obj = JSON.parse(data);
                let code = Obj.code;
                let address = Obj.data;
                let msg = Obj.msg;
                console.log(address);
                $("#pp").html(address.province)
                $("#cc").html(address.city)
                $("#dd").html(address.dist)
                $("#nn").html(address.name)
                $("#ppp").html(address.phone)
                $("#aa").html(address.address)
             }}
            )}

</script>